<template>
  <div style="height: 100%">
    <el-card style="margin-bottom: 15px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>导航三/</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card class="box-card">
      <el-table :data="tableData" border height="250" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" />

        <el-table-column label="操作">
          <template #default="scope">
            <el-button  type="primary" size="small" @click="handleClick"
            >编辑</el-button
            >
            <el-button  type="danger" size="small" @click="handleDel(scope.row.name)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="float: right; margin-top: 10px"
          background
          layout="prev, pager, next"
          :total="tableData.length">
      </el-pagination>
    </el-card>
  </div>

</template>

<script>
import {ElMessage} from "element-plus";
import {reactive} from "vue";

export default {
  name: "NavTest2",
  // 类似data（） vue3 语法糖
  setup(){
    let tableData = reactive( [
      {
        date: '2016-05-03',
        name: '妲己',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: '王昭君',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: '上官婉儿',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: '沈梦溪',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-08',
        name: '嬴政',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-06',
        name: '扁鹊',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-07',
        name: '姜子牙',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],);
    return {tableData}
  },
  methods:{
    handleClick(){
      ElMessage({
        message: '编辑成功',
        type: 'success',
      })
    },
    handleDel(name){
      ElMessage({
        message: `删除${name}成功`,
        type: 'success',
      })
    }
  }
}
</script>

<style scoped>
.box-card{
  height: 100%;
}
</style>